<template>
	<view class="content">
        <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item style="" >
               <image :src="$domain.api+detail.img_url" style="width: 100%;height: 300rpx;" mode=""></image>
            </swiper-item>
        </swiper>
        <view class="plr16 pb10">
            <view class="justify-between ft14 align-center" style="color: #979797;">
				<view class="flex1 flex-col">
					<text style="font-weight: 600;font-size: 32rpx;color: #000000;" class="mb5 mt10">{{detail.name}}</text>	
					<text>中国广东省深圳市福田区红荔西路7022-6号</text>
				</view>
                <view class="flex-col align-center mt5">
					电话
                </view>
				<view class="flex-col align-center mt5 ml5" @click="dh">
					导航
				</view>
            </view>
            <view class="notice justify-between align-center mt15  radius8">
                <view class="flex1">
                   <text>特别提示：</text> 
                   <view class="">
							{{detail.notice}}
                   </view>
                </view>
                
            </view>
            <view class="justify-between align-center paybtn">
                <button  open-type="contact" @contact="contact"  class="freebtn" > 在线咨询</button>
                <view class="onlinePay" @click="toMain">立即预约</view>
                
            </view>
            <view class="moduleTitle ft16 ">场馆介绍    </view>
            <view class="bgWhite radius8 ptb15 plr25 ft16 " style="line-height: 56rpx;color: #3d3d3d;">
                {{detail.content}}
            </view>
            <view class="moduleTitle ft16 ">交通指引    </view>
            <view class="bgWhite radius8 ptb15 plr25 ft16 " style="line-height: 56rpx;color: #3d3d3d;">
                {{detail.traffic}}
            </view>
        </view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
				user_id:uni.getStorageSync('userId'),
				userInfo:{},
			}
		},
		
		onLoad(opt) {
                if(opt.id) this.id = opt.id
                this.getMain()
                this.getLocation()
		},
		onShow() {
			this.$api.userinfo({user_id:this.user_id}).then(res=>{
							this.userInfo=res.data		
			})
		},
		methods: {
			
            getLocation(){
                        
                    uni.getLocation({
                        type: 'wgs84',
                        success:function(res){
                            console.log(res)
                        },complete:function(data){
                        	console.log(data)
                        }
                    })
            },
			async getMain() {
                const {data,code}  =   await this.$api.venueDetail({id:this.id })
                if(code==200){
                    this.detail = data
                }
			},
            toMain(item){
				if (!uni.getStorageSync('logintoken')) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				if(!this.userInfo.cardID)return uni.showModal({
					title:'提示',
					content:'您当前未实名，请先实名认证',
					success:function(res){
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/idCard/index'
							})
						}
						
					}
				})
                    uni.navigateTo({
                        url:'/pages/chooseSession/index?id='+this.detail.id
                    })
            },
				
			dh(){
			}
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
    .paybtn{
        margin: 38rpx 0 ;
        view{
            width: 324rpx;
            height: 92rpx;
            background: #FFFFFF;
            border-radius: 12rpx ;
            border: 2rpx solid #2CC6A1;
            font-size: 32rpx;
            color: #2CC6A1;
            line-height: 92rpx;
            text-align: center;
        }
        .freebtn{
            width: 324rpx;
            height: 92rpx;
            background: #FFFFFF;
            border-radius: 12rpx ;
            border: 2rpx solid #2CC6A1;
            font-size: 32rpx;
            color: #2CC6A1;
            line-height: 92rpx;
            text-align: center;
        }
        .onlinePay{
            background: #2CC6A1;
            color: #fff;
        }
    }
    .moduleTitle{
        font-weight: 600;
        color: #000000;
        line-height: 54rpx;
        margin: 30rpx 0 10rpx;
    }
</style>